<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    <meta name="description" content="Free Web tutorials on HTML and CSS">
    <title>HTML 常用标签示例</title>
</head>

<body>
    <!-- HTML 标题 -->
    <hr id="page-header">
    <h2>HTML 标题</h2>
    <hr>
    <h1>这是H1标题</h1>
    <h2>这是H2标题</h2>
    <h3>这是H3标题</h3>
    <h4>这是H4标题</h4>
    <h5>这是H5标题</h5>
    <h6>这是H6标题</h6>

    <!-- HTML 段落 -->
    <br>
    <hr>
    <h2>HTML 段落</h2>
    <hr>
    <p>这是一个段落</p>
    <p>这是      另一个 段落，使用空格</p>
    <p>这是&nbsp;&nbsp;&nbsp;&nbsp;第三个&nbsp;段落，使用多个连续空格</p>
    <p>段落内折行 <br> 用换行标签</p>

    <!-- HTML 列表 -->
    <br>
    <hr>
    <h2>HTML 列表</h2>
    <hr>
    <h4>无序列表</h4>
    <ul>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
    <h4>有序列表</h4>
    <ol>
        <li>第一个列表项</li>
        <li>第二个列表项</li>
        <li>第三个列表项</li>
    </ol>
    <h4>层级列表</h4>
    <dl>
        <dt>一级列表</dt>
        <dd>二级列表1</dd>
        <dd>二级列表2</dd>
        <dt>一级列表</dt>
        <dt>一级列表</dt>
    </dl>

    <!-- HTML 链接 -->
    <br>
    <hr>
    <h2>HTML 链接</h2>
    <hr>
    <p><a href="http://www.baidu.com">这是一个去往百度链接</a></p>
    <p><a href="index.html" target="_blank">这是一个去往本站首页的连接</a></p>
    <p><a href="#page-header">这是一个去往本页头部的连接</a></p>

    <!-- HTML 图像 -->
    <br>
    <hr>
    <h2>HTML 图像</h2>
    <hr>
    <img src="images/run.gif" alt="奔跑GIF动画">

    <!-- HTML 表格 -->
    <br>
    <hr>
    <h2>HTML 表格</h2>
    <hr>
    <table border="1" width="600" height="150" cellpadding="20" cellspacing="5">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
        <tr>
            <td>Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
        </tr>
        <tr>
            <td>Row 2 Cell 1</td>
            <td colspan="2">Row 2 Cell 2</td>
        </tr>
        <tr>
            <td rowspan="2">Row 3 Cell 1</td>
            <td>Row 3 Cell 2</td>
            <td>Row 3 Cell 3</td>
        </tr>
        <tr>
            <td>Row 4 Cell 2</td>
            <td>Row 4 Cell 3</td>
        </tr>
        <tr>
            <td colspan="5">Row 3 Cell 1</td>
        </tr>
    </table>

    <!-- HTML 表单 -->
    <br>
    <hr>
    <h2>HTML 表单</h2>
    <hr>
    <form action="" method="post">
        <table>
            <tr>
                <th align="right">用户名：</th>
                <td><input type="text" name="username" placeholder="请填入用户名"></td>
            </tr>
            <tr>
                <th align="right">密码：</th>
                <td><input type="password" name="password"></td>
            </tr>
            <tr>
                <th align="right">性别：</th>
                <td><input type="radio" name="sex" value="male" checked="checked">男 <input type="radio" name="sex"
                        value="female">女</p>
                </td>
            </tr>
            <tr>
                <th align="right">兴趣爱好：</th>
                <td>
                    <input type="checkbox" name="hobby" value="basketball">篮球<br>
                    <input type="checkbox" name="hobby" value="football" checked="checked">足球<br>
                    <input type="checkbox" name="hobby" value="badminton" checked="checked">羽毛球<br>
                </td>
            </tr>
            <tr>
                <th align="right">班级：</th>
                <td>
                    <select name="class" id="class">
                        <option value="1">一班</option>
                        <option value="2" selected>二班</option>
                        <option value="3">三班</option>
                        <option value="4">四班</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th align="right">自我介绍:</th>
                <td>
                    <textarea rows="10" cols="30">我是...</textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="提交">
                    <input type="reset" value="重置">
                    <input type="button" value="普通按钮">
                </td>
            </tr>
        </table>



    </form>

    <!-- HTML 框架 -->
    <br>
    <hr>
    <h2>HTML 框架</h2>
    <hr>
    <iframe src="item.html" width="400" height="100"></iframe>

    <!-- HTML5 新增特性 -->
    <br> <br> <br>
    <hr>
    <h2>HTML 新增特性</h2>
    <hr>
    <h4>Audio</h4>
    <audio controls>
        <source src="statics/horse.ogg" type="audio/ogg">
        <source src="statics/horse.mp3" type="audio/mpeg">
        您的浏览器不支持 audio 元素。
    </audio>
    <h4>Video</h4>
    <video width="320" height="240" controls>
        <source src="statics/movie.mp4" type="video/mp4">
        <source src="statics/movie.ogg" type="video/ogg">
        您的浏览器不支持 HTML5 video 标签。
    </video>
</body>

</html>